<template>
  <div class="login-wrap">
    <div class="title">videoweb 后台管理登录</div>
    <div class="login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="password"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getLoginStatus} from '../api/index'
import {mixin} from '../mixins/index'
export default {
  name:'login',
  mixins:[mixin],
  data(){
    return {
      ruleForm:{
        username:'admin',
        password:'123'
      },
      rules:{
        username:[
          {required:true,message:'请输入用户名',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'}
        ],
      }
    }
  },
  methods:{
    submitForm(){
      let params = new URLSearchParams
      params.append('username',this.ruleForm.username)
      params.append('password',this.ruleForm.password)
      getLoginStatus(params)
        .then(res => {
          if(res.code == 1){
            localStorage.setItem('userName',this.ruleForm.username)
            this.notify("登录成功","success")
            this.$router.push('/Home')
          }else{
            this.notify("登录失败","error")
          }
        }).catch(err =>{
          console.log(err);
        })
    }
  }
}
</script>

<style>
@import '../assets/css/loginIn.css';
</style>